/* CSS Document */

html{
   background: #fff;
}

html, body, #wrap {
   height: 100%;
}

body > #wrap {
   height: auto;
   min-height: 100%;
}

body {
   padding: 0;
   margin: 0;
   font-size: 90%;
   font-family: Arial, Helvetica, sans-serif, Georgia, "Times New Roman", Times, serif;
   line-height: 1.6em;
   text-align: center;
   color:#000;
}

ul, li, img, body, html {
   list-style-type:none;
   margin:0;
   padding:0;
}

a {
   text-decoration:none;
   color:#000;
}

#container {
   text-align:left;
   width:800px;
   margin: auto;
   padding-bottom: 150px;
}

#container ul li a{
   list-style-type:none;
}

#header{
   background:url(../images/entete.png);
   width:800px;
   height:116px;
   margin-bottom: 10px;
   overflow:hidden;
   /* ombrage */
   box-shadow: 1px 1px 12px #555;
   -moz-box-shadow: 1px 1px 12px #555;
   -webkit-box-shadow: 1px 1px 6px #555;
}

#header h1 {
   display:none;
}


/*sidebar*/
#sidebar{
   width:150px;
   float:left;
   background: #a2cc3a;
   /* coin arrondi */
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   /* ombrage */
   box-shadow: 0px 1px 12px #555;
   -moz-box-shadow: 0px 1px 12px #555;
   -webkit-box-shadow: 0px 1px 6px #555;
}

/* fil d'arianne */
#arianne {
   /* degrade */
   background: linear-gradient(#656565, #252525);
   background: -moz-linear-gradient(#656565, #252525);
   background: -webkit-linear-gradient(#656565, #252525);
   /* coin arrondi */
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;

   padding: 10px;
      /* ombrage */
   box-shadow: 1px 1px 12px #555;
   -moz-box-shadow: 1px 1px 12px #555;
   -webkit-box-shadow: 1px 1px 6px #555;
}

#arianne li {
   color: #a6a6a6;
   font-weight: bold;
   display: inline;
   padding: 5px;
   padding-right: 25px;
   background:url(../images/fleche.png) no-repeat right;
   
}

#arianne a{
 color: #a6a6a6;
   font-weight: bold;
   display: inline;
   padding: 0px;
   padding-right: 0px;
}
#arianne ma {
   color: #a6a6a6;
   font-weight: bold;
   display: inline;
   padding: 5px;
   padding-right: 25px;
   background:url(../images/maison.png) no-repeat right;
   
}

/* MAIN CONTENT */
#mainContent {
   margin-left : 160px; /*equal to the width of sidebar*/
   padding-left: 0.1em;
   height: 500px;
   background: #efefef;
   /* coin arrondi */
   -moz-border-radius: 10px 0px 10px 10px;
   -webkit-border-radius: 10px 0px 10px 10px;
   border-radius: 10px 0px 10px 10px;
   /* ombrage */
   box-shadow: 1px 1px 12px #555;
   -moz-box-shadow: 1px 1px 12px #555;
   -webkit-box-shadow: 1px 1px 6px #555;
}

#mainContent div{
   overflow:hidden;
}

/*footer */
#footer{
   background:#515151;
   position:relative;
   margin-top: -150px;
   height:150px;
   clear:bothl
      /* ombrage */
   box-shadow: 1px 1px 12px #555;
   -moz-box-shadow: 1px 1px 12px #555;
   -webkit-box-shadow: 1px 1px 6px #555;
}

/* menu onglets */

#en-tete {
   overflow: hidden;
}

#en-tete ul {
   float:right;
   margin-top: 10px;
   padding:0;
   list-style:none
}

#en-tete li {
   float:left;
   margin-left: 3px;
   border-radius: 10px 10px 0px 0px;
   -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
   background: #a2cc38;
   /* ombrage */
   box-shadow: 1px 1px 12px #555;
   -moz-box-shadow: 1px 1px 12px #555;
   -webkit-box-shadow: 1px 1px 6px #555;

   color: #fff;
}

#en-tete li#actif {
   background: #efefef;
}

#en-tete a, #actif {
   float:left;
   text-decoration:none;
   letter-spacing:1px;
   padding-left:10px;
   background:url(../img/coin-gauche.png) 0% -250px no-repeat
}

#en-tete span, #actif span {
   float:left;
   padding:6px 10px 3px 0;
   background:url(../img/coin-droit.png) 100% -250px no-repeat;
}

#actif {
   background-position:0 0;
}

#actif span {
   background-position:100% 0;
}

#en-tete a:hover, #en-tete a:focus {
   background-position:0 -500px
}

#en-tete a:hover span, #en-tete a:focus span {
   background-position:100% -500px
}
